<template>
    <div ref="Level" id="Level" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import { onMounted, ref, watch, defineProps } from 'vue';
const props = defineProps({
    leveldata: {
        type: Array,
        default: () => [0.5]
    }
});

onMounted(() => {
    var chartDom = document.getElementById('Level');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
  series: [
    {
      type: 'liquidFill',
      data: props.leveldata, // 替换为实际的百分比数据
      label: {
        normal: {
          fontSize: 20, // 根据需要调整字体大小
          color: '#156ACF', // 设置字体颜色
          formatter: (param) => `${(param.value * 100).toFixed(0)}%` // 确保格式化正确
        }
      },
      outline: {
          borderDistance: 4,
          itemStyle: {
              borderWidth: 2,
              borderColor: '#156ACF',
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
      }
    }
  ]
};


    myChart.setOption(option);
    window.addEventListener('resize', () => {
    myChart.resize();
  });
  // watch(props.leveldata, (newVal) => {
  //   console.log("newVal:",newVal);
  //   myChart.setOption({
  //     series: [
  //       {
  //         data: [newVal]
  //       }
  //     ]
  //   });
  // });
  setInterval(() => {
    // console.log("props.leveldata:",props.leveldata);
    myChart.setOption({
      series: [
        {
          data: [props.leveldata]
        }
      ]
    });
  }, 1000);
});
</script>